<template>
    <div class="path-bar">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item v-for="(item, i) in list" :key="i" ><span @click="goToPath(item, i)" style="cursor: pointer;">{{item.name}}</span></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => { return [] }
        }
    },
    methods: {
        goToPath(item, i) {
            this.$emit('pathClick', item, i)
        },
        makeUrlPath(start = 0, end = this.list.length) {
            let url = ''
            for (let i = start; i < end; i++) {
                const item = this.list[i]
                url = url + '/' + item.name
            }
            return url.substring(1)
        }
    }
}
</script>

<style>
.path-bar {
    margin: 10px;
}
</style>
